<script setup>
import { ref, computed } from 'vue'
import { getSongDetail } from '@/api/song'
import { baseURL } from '@/api/request'

// 是否显示抽屉
const drawer = ref(false);
const song = ref({
  name: '',
  introduction: '',
  pic: '',
  lyric: '',
  url: '',
  createTime: '',
  updateTime: ''
});
const musicPic = computed(() => {
  if (!song.value.pic) return ''
  // 拼接完整的图片地址
  return baseURL + '/r' + song.value.pic
});
const musicUrl = computed(() => {
  if (!song.value.url) return ''
  // 拼接完整的音乐文件地址
  return baseURL + '/r' + song.value.url
});
// 定一个供父组件调用的打开抽屉的方法
const openDrawer = async (row) => {
  drawer.value = true
  // 异步请求
  const { data } = await getSongDetail(row.id)
  song.value = data

}
//  暴露方法
defineExpose({
  openDrawer
})
</script>

<template>
  <el-drawer v-model="drawer" direction="rtl" size="50%">
    <template #header>
      <h4>歌曲详情信息</h4>
    </template>
    <template #default>
      <div>
        <div>歌曲名称：{{ song.name }}</div>
        <div>简介：{{ song.introduction }}</div>
        <div class="pic">         
          <img :src="musicPic" alt=""></img>
        </div>
        <!-- 歌词 -->
        <div>歌词：
            <pre>{{ song.lyric }}</pre>
        </div>
        <!-- 歌曲地址 -->
        <div>下载歌曲：<a :href="musicUrl" target="_blank">{{ musicUrl }}</a></div>
        
        <!-- 创建时间 -->
        <div>创建时间：{{ song.createTime }}</div>
        <!-- 修改时间 -->
        <div>修改时间：{{ song.updateTime }}</div>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="drawer = false">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped>
.pic img{
  width: 120pz;
  height: 120px;  

}
</style>